<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加工厂管理 - 粮食收购大数据平台</title>
    <!-- Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Element Plus JS -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <!-- Element Plus Icons -->
    <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
        }
        .page-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .page-title {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .page-title i {
            color: #FF6B35;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-align: center;
        }
        .stat-icon {
            font-size: 32px;
            margin-bottom: 10px;
        }
        .stat-icon.total { color: #409EFF; }
        .stat-icon.active { color: #67C23A; }
        .stat-icon.capacity { color: #E6A23C; }
        .stat-icon.output { color: #F56C6C; }
        .stat-value {
            font-size: 28px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 14px;
            color: #666;
        }
        .content-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .search-bar {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            align-items: center;
        }
        .search-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .search-item label {
            font-size: 14px;
            color: #666;
            white-space: nowrap;
        }
        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .table-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        .factory-type {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
        }
        .factory-type.rice { background-color: #67C23A; }
        .factory-type.wheat { background-color: #E6A23C; }
        .factory-type.corn { background-color: #F56C6C; }
        .factory-type.soybean { background-color: #909399; }
        .factory-type.comprehensive { background-color: #409EFF; }
        .factory-scale {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
        }
        .factory-scale.large { background-color: #F56C6C; }
        .factory-scale.medium { background-color: #E6A23C; }
        .factory-scale.small { background-color: #909399; }
        .dialog-form {
            padding: 20px 0;
        }
        .form-section {
            margin-bottom: 20px;
        }
        .form-section-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
            border-left: 3px solid #FF6B35;
            padding-left: 10px;
        }
        @media (max-width: 768px) {
            .search-bar {
                flex-direction: column;
                align-items: stretch;
            }
            .search-item {
                flex-direction: column;
                align-items: stretch;
            }
            .table-header {
                flex-direction: column;
                gap: 10px;
                align-items: stretch;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="page-container">
            <!-- 页面头部 -->
            <div class="page-header">
                <h1 class="page-title">
                    <i class="fas fa-industry"></i>
                    加工厂管理
                </h1>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon total">
                        <i class="fas fa-industry"></i>
                    </div>
                    <div class="stat-value">{{ totalFactories }}</div>
                    <div class="stat-label">总加工厂数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon active">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="stat-value">{{ activeFactories }}</div>
                    <div class="stat-label">运营中</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon capacity">
                        <i class="fas fa-warehouse"></i>
                    </div>
                    <div class="stat-value">{{ totalCapacity }}万吨</div>
                    <div class="stat-label">总产能</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon output">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="stat-value">{{ totalOutput }}万吨</div>
                    <div class="stat-label">年产量</div>
                </div>
            </div>

            <!-- 主要内容 -->
            <div class="content-card">
                <!-- 搜索栏 -->
                <div class="search-bar">
                    <div class="search-item">
                        <label>关键词：</label>
                        <el-input
                            v-model="searchForm.keyword"
                            placeholder="请输入加工厂名称或代码"
                            style="width: 200px;"
                            clearable>
                        </el-input>
                    </div>
                    <div class="search-item">
                        <label>所属地区：</label>
                        <el-select v-model="searchForm.regionId" placeholder="请选择地区" style="width: 150px;" clearable>
                            <el-option v-for="region in regionList" :key="region.id" :label="region.name" :value="region.id"></el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <label>加工类型：</label>
                        <el-select v-model="searchForm.factoryType" placeholder="请选择类型" style="width: 120px;" clearable>
                            <el-option label="稻米加工" value="rice"></el-option>
                            <el-option label="小麦加工" value="wheat"></el-option>
                            <el-option label="玉米加工" value="corn"></el-option>
                            <el-option label="大豆加工" value="soybean"></el-option>
                            <el-option label="综合加工" value="comprehensive"></el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <label>规模：</label>
                        <el-select v-model="searchForm.scale" placeholder="请选择规模" style="width: 100px;" clearable>
                            <el-option label="大型" value="large"></el-option>
                            <el-option label="中型" value="medium"></el-option>
                            <el-option label="小型" value="small"></el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <label>状态：</label>
                        <el-select v-model="searchForm.status" placeholder="请选择状态" style="width: 100px;" clearable>
                            <el-option label="运营中" value="1"></el-option>
                            <el-option label="停产" value="0"></el-option>
                        </el-select>
                    </div>
                    <el-button type="primary" @click="searchFactories">
                        <i class="fas fa-search"></i> 搜索
                    </el-button>
                    <el-button @click="resetSearch">
                        <i class="fas fa-redo"></i> 重置
                    </el-button>
                </div>

                <!-- 表格头部 -->
                <div class="table-header">
                    <div class="table-title">加工厂列表</div>
                    <div>
                        <el-button type="primary" @click="showAddDialog">
                            <i class="fas fa-plus"></i> 新增加工厂
                        </el-button>
                        <el-button type="success" @click="exportData">
                            <i class="fas fa-download"></i> 导出数据
                        </el-button>
                        <el-button type="warning" @click="batchImport">
                            <i class="fas fa-upload"></i> 批量导入
                        </el-button>
                    </div>
                </div>

                <!-- 数据表格 -->
                <el-table :data="filteredFactories" style="width: 100%" v-loading="loading">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="factoryCode" label="加工厂代码" width="120" sortable></el-table-column>
                    <el-table-column prop="factoryName" label="加工厂名称" width="180">
                        <template #default="scope">
                            <strong>{{ scope.row.factoryName }}</strong>
                        </template>
                    </el-table-column>
                    <el-table-column prop="regionName" label="所属地区" width="120"></el-table-column>
                    <el-table-column prop="factoryType" label="加工类型" width="100">
                        <template #default="scope">
                            <span :class="`factory-type ${scope.row.factoryType}`">
                                {{ getFactoryTypeText(scope.row.factoryType) }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="scale" label="规模" width="80">
                        <template #default="scope">
                            <span :class="`factory-scale ${scope.row.scale}`">
                                {{ getScaleText(scope.row.scale) }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="legalPerson" label="法人代表" width="100"></el-table-column>
                    <el-table-column prop="phone" label="联系电话" width="120"></el-table-column>
                    <el-table-column prop="capacity" label="年产能(万吨)" width="120" sortable>
                        <template #default="scope">
                            <span>{{ scope.row.capacity?.toLocaleString() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="output" label="年产量(万吨)" width="120" sortable>
                        <template #default="scope">
                            <span>{{ scope.row.output?.toLocaleString() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="employees" label="员工数" width="80">
                        <template #default="scope">
                            <el-tag type="info">{{ scope.row.employees }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="revenue" label="年营收(万元)" width="120" sortable>
                        <template #default="scope">
                            <span>{{ scope.row.revenue?.toLocaleString() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="80">
                        <template #default="scope">
                            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                                {{ scope.row.status === 1 ? '运营中' : '停产' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180" sortable></el-table-column>
                    <el-table-column label="操作" width="200" fixed="right">
                        <template #default="scope">
                            <el-button size="small" @click="viewFactory(scope.row)">
                                <i class="fas fa-eye"></i> 查看
                            </el-button>
                            <el-button size="small" type="primary" @click="editFactory(scope.row)">
                                <i class="fas fa-edit"></i> 编辑
                            </el-button>
                            <el-button size="small" type="danger" @click="deleteFactory(scope.row)">
                                <i class="fas fa-trash"></i> 删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div style="margin-top: 20px; text-align: center;">
                    <el-pagination
                        v-model:current-page="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 20, 50, 100]"
                        :total="totalCount"
                        layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                </div>
            </div>
        </div>

        <!-- 新增/编辑对话框 -->
        <el-dialog
            :title="dialogTitle"
            v-model="dialogVisible"
            width="800px"
            :before-close="handleClose">
            <div class="dialog-form">
                <el-form :model="factoryForm" :rules="rules" ref="factoryFormRef" label-width="120px">
                    <div class="form-section">
                        <div class="form-section-title">基本信息</div>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="加工厂代码" prop="factoryCode">
                                    <el-input v-model="factoryForm.factoryCode" placeholder="请输入加工厂代码"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="加工厂名称" prop="factoryName">
                                    <el-input v-model="factoryForm.factoryName" placeholder="请输入加工厂名称"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="所属地区" prop="regionId">
                                    <el-select v-model="factoryForm.regionId" placeholder="请选择地区" style="width: 100%;">
                                        <el-option v-for="region in regionList" :key="region.id" :label="region.name" :value="region.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="加工类型" prop="factoryType">
                                    <el-select v-model="factoryForm.factoryType" placeholder="请选择加工类型" style="width: 100%;">
                                        <el-option label="稻米加工" value="rice"></el-option>
                                        <el-option label="小麦加工" value="wheat"></el-option>
                                        <el-option label="玉米加工" value="corn"></el-option>
                                        <el-option label="大豆加工" value="soybean"></el-option>
                                        <el-option label="综合加工" value="comprehensive"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="规模" prop="scale">
                                    <el-select v-model="factoryForm.scale" placeholder="请选择规模" style="width: 100%;">
                                        <el-option label="大型" value="large"></el-option>
                                        <el-option label="中型" value="medium"></el-option>
                                        <el-option label="小型" value="small"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="法人代表" prop="legalPerson">
                                    <el-input v-model="factoryForm.legalPerson" placeholder="请输入法人代表"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="联系电话" prop="phone">
                                    <el-input v-model="factoryForm.phone" placeholder="请输入联系电话"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="状态" prop="status">
                                    <el-radio-group v-model="factoryForm.status">
                                        <el-radio :label="1">运营中</el-radio>
                                        <el-radio :label="0">停产</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="详细地址" prop="address">
                            <el-input v-model="factoryForm.address" placeholder="请输入详细地址"></el-input>
                        </el-form-item>
                    </div>
                    
                    <div class="form-section">
                        <div class="form-section-title">生产信息</div>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="年产能(万吨)" prop="capacity">
                                    <el-input-number v-model="factoryForm.capacity" :min="0" :precision="2" style="width: 100%;"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="年产量(万吨)" prop="output">
                                    <el-input-number v-model="factoryForm.output" :min="0" :precision="2" style="width: 100%;"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="员工数" prop="employees">
                                    <el-input-number v-model="factoryForm.employees" :min="0" style="width: 100%;"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="年营收(万元)" prop="revenue">
                                    <el-input-number v-model="factoryForm.revenue" :min="0" :precision="2" style="width: 100%;"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="占地面积(亩)" prop="landArea">
                                    <el-input-number v-model="factoryForm.landArea" :min="0" :precision="2" style="width: 100%;"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="建筑面积(㎡)" prop="buildingArea">
                                    <el-input-number v-model="factoryForm.buildingArea" :min="0" :precision="2" style="width: 100%;"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="加工厂描述" prop="description">
                            <el-input type="textarea" v-model="factoryForm.description" placeholder="请输入加工厂描述" :rows="3"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveFactory">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    <script>
        const { createApp, ref, computed, onMounted } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;

        createApp({
            setup() {
                // 响应式数据
                const loading = ref(false);
                const currentPage = ref(1);
                const pageSize = ref(20);
                const totalCount = ref(0);
                const dialogVisible = ref(false);
                const isEdit = ref(false);
                
                // 搜索表单
                const searchForm = ref({
                    keyword: '',
                    regionId: '',
                    factoryType: '',
                    scale: '',
                    status: ''
                });
                
                // 加工厂表单
                const factoryForm = ref({
                    id: null,
                    factoryCode: '',
                    factoryName: '',
                    regionId: '',
                    factoryType: '',
                    scale: '',
                    legalPerson: '',
                    phone: '',
                    address: '',
                    capacity: null,
                    output: null,
                    employees: 0,
                    revenue: null,
                    landArea: null,
                    buildingArea: null,
                    description: '',
                    status: 1
                });
                
                // 表单验证规则
                const rules = {
                    factoryCode: [{ required: true, message: '请输入加工厂代码', trigger: 'blur' }],
                    factoryName: [{ required: true, message: '请输入加工厂名称', trigger: 'blur' }],
                    regionId: [{ required: true, message: '请选择所属地区', trigger: 'change' }],
                    factoryType: [{ required: true, message: '请选择加工类型', trigger: 'change' }],
                    scale: [{ required: true, message: '请选择规模', trigger: 'change' }],
                    legalPerson: [{ required: true, message: '请输入法人代表', trigger: 'blur' }],
                    phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
                };
                
                // 地区列表
                const regionList = ref([
                    { id: 1, name: '北京市' },
                    { id: 2, name: '上海市' },
                    { id: 3, name: '河北省' },
                    { id: 4, name: '山东省' },
                    { id: 5, name: '江苏省' },
                    { id: 6, name: '浙江省' },
                    { id: 7, name: '广东省' },
                    { id: 8, name: '四川省' },
                    { id: 9, name: '湖南省' },
                    { id: 10, name: '黑龙江省' }
                ]);
                
                // 模拟加工厂数据
                const factoryList = ref([
                    {
                        id: 1,
                        factoryCode: 'GF001',
                        factoryName: '金龙稻米加工厂',
                        regionId: 3,
                        regionName: '河北省',
                        factoryType: 'rice',
                        scale: 'large',
                        legalPerson: '张建国',
                        phone: '0311-88123456',
                        address: '河北省石家庄市正定县工业园区',
                        capacity: 50.0,
                        output: 45.8,
                        employees: 280,
                        revenue: 18600.0,
                        landArea: 120.5,
                        buildingArea: 8500.0,
                        description: '专业从事优质稻米加工，拥有先进的生产设备和技术',
                        status: 1,
                        createTime: '2024-01-15 10:30:00'
                    },
                    {
                        id: 2,
                        factoryCode: 'GF002',
                        factoryName: '丰收小麦加工有限公司',
                        regionId: 4,
                        regionName: '山东省',
                        factoryType: 'wheat',
                        scale: 'large',
                        legalPerson: '李明华',
                        phone: '0531-82345678',
                        address: '山东省济南市章丘区经济开发区',
                        capacity: 80.0,
                        output: 72.5,
                        employees: 350,
                        revenue: 28900.0,
                        landArea: 180.0,
                        buildingArea: 12000.0,
                        description: '山东省最大的小麦加工企业之一，产品销往全国各地',
                        status: 1,
                        createTime: '2024-01-15 10:31:00'
                    },
                    {
                        id: 3,
                        factoryCode: 'GF003',
                        factoryName: '绿野玉米深加工厂',
                        regionId: 10,
                        regionName: '黑龙江省',
                        factoryType: 'corn',
                        scale: 'medium',
                        legalPerson: '王大伟',
                        phone: '0451-87654321',
                        address: '黑龙江省哈尔滨市双城区农业园区',
                        capacity: 30.0,
                        output: 28.2,
                        employees: 180,
                        revenue: 12500.0,
                        landArea: 85.0,
                        buildingArea: 6200.0,
                        description: '专业玉米深加工，生产玉米淀粉、玉米油等产品',
                        status: 1,
                        createTime: '2024-01-15 10:32:00'
                    },
                    {
                        id: 4,
                        factoryCode: 'GF004',
                        factoryName: '东北大豆加工厂',
                        regionId: 10,
                        regionName: '黑龙江省',
                        factoryType: 'soybean',
                        scale: 'medium',
                        legalPerson: '赵国强',
                        phone: '0451-76543210',
                        address: '黑龙江省齐齐哈尔市龙江县工业区',
                        capacity: 25.0,
                        output: 22.8,
                        employees: 150,
                        revenue: 9800.0,
                        landArea: 65.0,
                        buildingArea: 4800.0,
                        description: '专业大豆加工，生产豆油、豆粕等产品',
                        status: 1,
                        createTime: '2024-01-15 10:33:00'
                    },
                    {
                        id: 5,
                        factoryCode: 'GF005',
                        factoryName: '江南综合粮食加工厂',
                        regionId: 5,
                        regionName: '江苏省',
                        factoryType: 'comprehensive',
                        scale: 'large',
                        legalPerson: '陈志华',
                        phone: '025-83456789',
                        address: '江苏省南京市江宁区科技园',
                        capacity: 60.0,
                        output: 55.6,
                        employees: 320,
                        revenue: 22800.0,
                        landArea: 150.0,
                        buildingArea: 10500.0,
                        description: '综合性粮食加工企业，加工多种粮食作物',
                        status: 1,
                        createTime: '2024-01-15 10:34:00'
                    },
                    {
                        id: 6,
                        factoryCode: 'GF006',
                        factoryName: '华南稻米精加工厂',
                        regionId: 7,
                        regionName: '广东省',
                        factoryType: 'rice',
                        scale: 'medium',
                        legalPerson: '林志强',
                        phone: '020-87654321',
                        address: '广东省广州市增城区新塘镇',
                        capacity: 35.0,
                        output: 32.5,
                        employees: 200,
                        revenue: 14600.0,
                        landArea: 90.0,
                        buildingArea: 6800.0,
                        description: '专业生产优质大米，供应华南地区市场',
                        status: 1,
                        createTime: '2024-01-15 10:35:00'
                    },
                    {
                        id: 7,
                        factoryCode: 'GF007',
                        factoryName: '西部小麦制粉厂',
                        regionId: 8,
                        regionName: '四川省',
                        factoryType: 'wheat',
                        scale: 'small',
                        legalPerson: '刘建军',
                        phone: '028-85432109',
                        address: '四川省成都市新都区工业园',
                        capacity: 15.0,
                        output: 13.8,
                        employees: 80,
                        revenue: 5600.0,
                        landArea: 35.0,
                        buildingArea: 2800.0,
                        description: '小型面粉加工厂，服务当地市场',
                        status: 1,
                        createTime: '2024-01-15 10:36:00'
                    },
                    {
                        id: 8,
                        factoryCode: 'GF008',
                        factoryName: '湘南玉米加工厂',
                        regionId: 9,
                        regionName: '湖南省',
                        factoryType: 'corn',
                        scale: 'small',
                        legalPerson: '周文斌',
                        phone: '0731-84321098',
                        address: '湖南省长沙市望城区经开区',
                        capacity: 12.0,
                        output: 10.5,
                        employees: 60,
                        revenue: 4200.0,
                        landArea: 28.0,
                        buildingArea: 2200.0,
                        description: '玉米初加工，主要生产玉米粉和饲料',
                        status: 0,
                        createTime: '2024-01-15 10:37:00'
                    }
                ]);
                
                // 计算属性
                const totalFactories = computed(() => factoryList.value.length);
                const activeFactories = computed(() => factoryList.value.filter(factory => factory.status === 1).length);
                const totalCapacity = computed(() => Math.round(factoryList.value.reduce((sum, factory) => sum + factory.capacity, 0) * 10) / 10);
                const totalOutput = computed(() => Math.round(factoryList.value.reduce((sum, factory) => sum + factory.output, 0) * 10) / 10);
                
                const dialogTitle = computed(() => isEdit.value ? '编辑加工厂' : '新增加工厂');
                
                const filteredFactories = computed(() => {
                    let filtered = factoryList.value;
                    
                    if (searchForm.value.keyword) {
                        const keyword = searchForm.value.keyword.toLowerCase();
                        filtered = filtered.filter(factory => 
                            factory.factoryName.toLowerCase().includes(keyword) ||
                            factory.factoryCode.toLowerCase().includes(keyword)
                        );
                    }
                    
                    if (searchForm.value.regionId) {
                        filtered = filtered.filter(factory => factory.regionId === searchForm.value.regionId);
                    }
                    
                    if (searchForm.value.factoryType) {
                        filtered = filtered.filter(factory => factory.factoryType === searchForm.value.factoryType);
                    }
                    
                    if (searchForm.value.scale) {
                        filtered = filtered.filter(factory => factory.scale === searchForm.value.scale);
                    }
                    
                    if (searchForm.value.status !== '') {
                        filtered = filtered.filter(factory => factory.status === parseInt(searchForm.value.status));
                    }
                    
                    totalCount.value = filtered.length;
                    return filtered;
                });
                
                // 方法
                const getFactoryTypeText = (type) => {
                    const typeMap = {
                        'rice': '稻米',
                        'wheat': '小麦',
                        'corn': '玉米',
                        'soybean': '大豆',
                        'comprehensive': '综合'
                    };
                    return typeMap[type] || '未知';
                };
                
                const getScaleText = (scale) => {
                    const scaleMap = {
                        'large': '大型',
                        'medium': '中型',
                        'small': '小型'
                    };
                    return scaleMap[scale] || '未知';
                };
                
                const searchFactories = () => {
                    loading.value = true;
                    setTimeout(() => {
                        loading.value = false;
                        ElMessage.success('搜索完成');
                    }, 500);
                };
                
                const resetSearch = () => {
                    searchForm.value = {
                        keyword: '',
                        regionId: '',
                        factoryType: '',
                        scale: '',
                        status: ''
                    };
                    ElMessage.info('搜索条件已重置');
                };
                
                const showAddDialog = () => {
                    isEdit.value = false;
                    factoryForm.value = {
                        id: null,
                        factoryCode: '',
                        factoryName: '',
                        regionId: '',
                        factoryType: '',
                        scale: '',
                        legalPerson: '',
                        phone: '',
                        address: '',
                        capacity: null,
                        output: null,
                        employees: 0,
                        revenue: null,
                        landArea: null,
                        buildingArea: null,
                        description: '',
                        status: 1
                    };
                    dialogVisible.value = true;
                };
                
                const viewFactory = (factory) => {
                    ElMessage.info(`查看加工厂：${factory.factoryName}`);
                };
                
                const editFactory = (factory) => {
                    isEdit.value = true;
                    factoryForm.value = { ...factory };
                    dialogVisible.value = true;
                };
                
                const deleteFactory = (factory) => {
                    ElMessageBox.confirm(
                        `确定要删除加工厂 "${factory.factoryName}" 吗？`,
                        '确认删除',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    ).then(() => {
                        const index = factoryList.value.findIndex(f => f.id === factory.id);
                        if (index > -1) {
                            factoryList.value.splice(index, 1);
                            ElMessage.success('删除成功');
                        }
                    }).catch(() => {
                        ElMessage.info('已取消删除');
                    });
                };
                
                const saveFactory = () => {
                    if (isEdit.value) {
                        // 编辑加工厂
                        const index = factoryList.value.findIndex(f => f.id === factoryForm.value.id);
                        if (index > -1) {
                            // 更新地区名称
                            const region = regionList.value.find(r => r.id === factoryForm.value.regionId);
                            factoryForm.value.regionName = region ? region.name : '';
                            
                            factoryList.value[index] = { ...factoryForm.value };
                            ElMessage.success('加工厂更新成功');
                        }
                    } else {
                        // 新增加工厂
                        const region = regionList.value.find(r => r.id === factoryForm.value.regionId);
                        const newFactory = {
                            ...factoryForm.value,
                            id: Date.now(),
                            regionName: region ? region.name : '',
                            createTime: new Date().toLocaleString('zh-CN')
                        };
                        factoryList.value.unshift(newFactory);
                        ElMessage.success('加工厂创建成功');
                    }
                    
                    dialogVisible.value = false;
                };
                
                const handleClose = () => {
                    dialogVisible.value = false;
                };
                
                const exportData = () => {
                    ElMessage.success('数据导出功能开发中...');
                };
                
                const batchImport = () => {
                    ElMessage.success('批量导入功能开发中...');
                };
                
                // 生命周期
                onMounted(() => {
                    // 初始化数据
                });
                
                return {
                    loading,
                    currentPage,
                    pageSize,
                    totalCount,
                    dialogVisible,
                    isEdit,
                    searchForm,
                    factoryForm,
                    rules,
                    regionList,
                    factoryList,
                    totalFactories,
                    activeFactories,
                    totalCapacity,
                    totalOutput,
                    dialogTitle,
                    filteredFactories,
                    getFactoryTypeText,
                    getScaleText,
                    searchFactories,
                    resetSearch,
                    showAddDialog,
                    viewFactory,
                    editFactory,
                    deleteFactory,
                    saveFactory,
                    handleClose,
                    exportData,
                    batchImport
                };
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>